import React from 'react'
import { getList, getQuestion } from '../../api/allapi'
import { Card, Badge, Button, Modal, Toast } from 'antd-mobile'
import Tloader from 'react-touch-loader'
import './loader.css'
// tab.css是Tloader自带的样式文件
import './tab.css'

const prompt = Modal.prompt;

const badgeStyleObj = {
  marginLeft: 12,
  padding: '0 3px',
  backgroundColor: '#fff',
  borderRadius: 2,
  color: '#f19736',
  border: '1px solid #f19736',
}
const thumbStyle = {
  width: '125px',
  height: '95px'
}
// 统一提供试图模板
// 1 和 2 是一类
const NewsOrTopComponent = (props) => {
  const { list } = props
  const newsOrTopTemplate = list.map((item, i) => {
    return (
      <Card key={i}>
        <Card.Header
          className='cardheader'
          thumb='http://127.0.0.1:8086/public/home.png'
          thumbStyle={thumbStyle}
          extra={
            <div>
              <Badge text={item.info_title} style={badgeStyleObj} />
              <Badge text={item.info_type} style={badgeStyleObj} />
            </div>
          }
        />
      </Card>
    )
  })
  return <div>{newsOrTopTemplate}</div>
}
// 获取问题列表数据
const getQuestionData = async (question) => {
  await getQuestion(question)
}
// tab3问答模板
const AnswerComponent = (props) => {
  const { list } = props
  const answerComplate = list.map((item, i) => {
    return (
      <Card key={i}>
        <Card.Body>
          <div>{item.question_name}</div>
        </Card.Body>
        <Card.Footer
          content={item.question_tag}
          extra={<Badge text={item.answer_content} style={badgeStyleObj} />}
        />
      </Card>
    )
  })
  const showModal = () => {
    prompt('请输入问题', '',
      [
        { text: '取消' },
        {
          text: '确定',
          onPress: value => {
            // console.log(value);
            getQuestionData(value)
          }
        },
      ], 'default', null, [])
  }
  return (
    <div>
      <Button
        size='small'
        type="warning"
        icon="check-circle-o"
        onClick={showModal}
      >发起提问</Button>
      {answerComplate}
    </div>
  )
}

class Loader extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      pagenum: 0,
      pagesize: 2,
      type: 1,
      total: 0,
      list: [],
      // loadmore相关数据
      hasMore: 1,
      initializing: 1
    }
  }
  componentDidMount() {
    const { type } = this.props
    this.setState({
      type
    }, () => {
      this.getListData()
    })
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 获取列表数据
  getListData = async () => {
    const { data: { list }, meta: { status, msg } } = await getList(
      this.state.pagenum,
      this.state.pagesize,
      this.state.type,
    )
    if (status === 200) {
      const { total, data } = list
      this.setState({
        total,
        list: data,
      })
    } else {
      console.log(msg);
    }
  }

  refresh = (resolve, reject) => {
    // 在刷新之后调用resolve()
    // console.log('刷新-------');
    this.setState({
      pagenum: 0,
      hasMore: 1
    }, async () => {
      const { data: { list }, meta: { status, msg } } = await getList(
        this.state.pagenum,
        this.state.pagesize,
        this.state.type,
      )
      if (status === 200) {
        const { total, data } = list
        this.setState({
          total,
          list: data,
        }, () => {
          resolve()
        })
      }
    })
  }

  loadMore = (resolve) => {
    // 加载更多之后调用resolve()
    // console.log('加载更多-------');
    this.setState({
      pagenum: this.state.pagenum + this.state.pagesize
    }, async () => {
      const { data: { list }, meta: { status, msg } } = await getList(
        this.state.pagenum,
        this.state.pagesize,
        this.state.type,
      )
      if (status === 200) {
        const { total, data } = list
        const dataList = [...this.state.list, ...data]
        this.setState({
          total,
          list: dataList,
          hasMore: this.state.pagenum + this.state.pagesize < total ? 1 : 0
        }, () => {
          resolve()
        })
      }
    })
  }
  render() {
    return (
      <div>
        <Tloader
          className="main"
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          hasMore={this.state.hasMore}
          initializing={this.state.initializing}
        >
          {this.state.type !== 3 ? <NewsOrTopComponent list={this.state.list} /> : <AnswerComponent list={this.state.list} />}
        </Tloader>
        {/* 底部留白 */}
        <div style={{ height: '50px' }}></div>
      </div>
    )
  }
}
export default Loader
